<template>
  <div class="hlb-player">
    <video
      id="player"
      class="video-js vjs-big-play-centered"
      :poster="poster"
      playsinline="true"
      webkit-playsinline="true"
      x-webkit-airplay="true"
      x5-video-player-type="h5-page"
      x5-video-player-fullscreen="true"
      x5-video-orientation="portraint"
      controlslist="nodownload noremoteplayback"
      preload="auto"
      controls
      autoplay
      muted
      disablePictureInPicture
    />
    <div
      v-if="iserror"
      class="hlb-player__error"
      :style="styl"
    >
      <div class="hlb-player__error-mask" />
      <div class="hlb-player__error-warp">
        <div class="hlb-player__error-desc">
          网络请求失败，请检查网络
        </div>
        <div
          class="hlb-player__error-btn"
          @click="onreload"
        >
          重新加载
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import flvjs from 'flv.js';
  import videojs from 'video.js';
  import 'video.js/dist/video-js.css';

  export default {
    name: 'HlbPlayer',
    props: {
      url: {
        type: String,
        default: '',
      },
      urlm3u8: {
        type: String,
        default: '',
      },
      poster: {
        type: String,
        default: '',
      },
      // stat: {
      //   type: Number,
      //   default: 0,
      // },
    },
    data() {
      return {
        iserror: false,
      };
    },
    computed: {
      styl() {
        const { poster } = this;
        return {
          backgroundImage: `url(${poster})`,
        };
      },
    },
    created() {
      this.onbeforeunload();
    },
    beforeDestroy() {
      this.destroyPlayer();
    },
    methods: {
      onbeforeunload() {
        window.onbeforeunload = (() => {
          this.destroyPlayer();
        });
      },
      onreload() {
        this.destroyPlayer();
        this.initPlayer();
      },
      initData() {
        this.iserror = false;
      },
      initPlayer() {
        this.initData();

        if (flvjs.isSupported()) {
          let { url } = this;
          const type = this.getVideoType(url);

          // 咪咕 http -> https
          if (url.includes('migucloud') && !url.includes('https')) {
            url = url.replace('http', 'https');
          }

          this.player = flvjs.createPlayer({
            type,
            isLive: true,
            url,
          });
          this.player.on(flvjs.Events.ERROR, (err) => {
            console.error('player err', err);
            this.iserror = true;
          });

          const el = document.getElementById('player');
          this.player.attachMediaElement(el);
          this.player.load();
          this.player.play();
        } else {
          console.error('浏览器不支持flvjs');
          let { urlm3u8 } = this;

          // 咪咕 http -> https
          if (urlm3u8.includes('migucloud') && !urlm3u8.includes('https')) {
            urlm3u8 = urlm3u8.replace('http://wshls.live.migucloud.com', 'https://wshlslive.migucloud.com');
          }
          this.player = videojs('player', {
            src: urlm3u8,
            liveui: true,
          }, function() {
            this.src(urlm3u8);
            this.play();
          });
          this.player.on('error', err => {
            console.error('player error', err);
            this.iserror = true;
          });
        }
      },
      destroyPlayer() {
        if (flvjs.isSupported()) {
          if (this.player) {
            this.player.pause();
            this.player.unload();
            this.player.detachMediaElement();
            this.player.destroy();
            this.player = null;
          }
          return;
        } else {
          console.error('浏览器不支持flvjs');
          if (this.player) {
            this.player.pause();
          }
        }
      },
      getVideoType(url) {
        if (!url) {
          return '';
        }
        url = url.split('?')[0];
        const tmps = url.split('.');
        const len = tmps.length;
        return tmps[len - 1];
      }
    }
  };
</script>

<style lang="scss">
.hlb-player {
  .video-js {
    width: 100%;
    height: 100%;
  }
  .video-js .vjs-picture-in-picture-control {
    display: none;
  }
}
</style>

<style lang="scss" scoped>
.hlb-player {
  width: 100%;
  height: 100%;
  position: relative;

  video {
    width: 100%;
    height: 100%;
  }

  &__error {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1023;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    background-size: cover;
    background-position: center;
  }

  &__error-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1023;
    background: rgba(0,0,0,0.7);
  }

  &__error-warp {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 1023;
    width: 100%;
  }

  &__error-desc {
    opacity: 0.9;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
  }

  &__error-btn {
    width: 70px;
    height: 28px;
    border: 1px solid #ffffff;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    line-height: 28px;
    margin: 12px auto 0;
  }
}
</style>
